<template>
    <el-row class="big-box">
        <el-col :span="16" class="send-message">
            <el-form>
                <el-form-item>
                    <h2>留言板</h2>
                </el-form-item>
                <el-form-item class="send-input">
                    <el-input v-model="textarea" maxlength="1000" :rows="20" type="textarea" show-word-limit />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="send">发送!</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
            <div class="box">

            </div>
        </el-col>
    </el-row>
</template>

<script setup>
const textarea = ref('');
const send = () => {
    ElMessage.success("消息发送成功啦!!!");
}
</script>

<style scoped>
.big-box {
    padding: 100px;
    height: calc(100vh - 60px);
    background-color: #f1f1f1;
}

.send-message {
    padding: 0 100px;
    text-align: center;
    background-image: url('../../assets/img/wood-grain.jpg');
    border-radius: 8px;
}

h2 {
    margin: 10px auto;
}

.send-input {
    box-shadow: 1px 1px 10px #ccc;
}

button {
    margin: 10px auto;
}

.box {
    display: flex;
    margin: 30px auto;
    width: 400px;
    height: 600px;
    background-image: url('../../assets/img/hiyori.jpg');
    border-radius: 8px;
}
</style>